<template>
	<comRoot :useRootSence="'login'">
		<template #page>
			
			<comDetailNavigateBack title="登录" :type="'appLogin'" />

			<!-- 页面背景 -->
			<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/page-bg.png`" class="bg" />

			<view
				class="login-box font-hanserif-bold relative flex-direction-column"
				:style="{
					height: 'calc(100vh - ' + commonNavHeight + ' - 26rpx)'
				}"
			>
				<view class="login-box-content relative">
					<view class="form-content relative">
						<label class="item-content" style="border-bottom: none;">
							<view class="title font-hanserif-bold"> 手机号 </view>
						</label>
						
						<label class="item-content">
							<input type="number" :maxlength="11" v-model="form.phone" placeholder="请输入手机号" placeholder-style="color: #CBCBCB;" value="" />
						</label>

						<label class="item-content" style="margin-top: 66rpx;">

							<input type="number" :maxlength="6" v-model="form.code" placeholder="请输入验证码" placeholder-style="color: #CBCBCB;" value="" />

							<button
								:disabled="isAllowOper"
								@click="getCodeFun"
								type="primary"
								:class="isAllowOper ? 'font-hanserif-bold btns-color flex-all-center' : 'font-hanserif-bold btns-color flex-all-center'"
								>{{ msg }}</button
							>
						</label>
					</view>
					
					<view class="save-btns relative" style="color: #ccc;" @click="tipObortSumbit" :class="!form.phone || !form.code ? 'disabled' : ''" v-if="!form.phone || !form.code">
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/user/settings-sumbit-bg.png`" class="bg" />
						<view class="relative">手机登录</view>
					</view>
					
					<view class="save-btns relative" v-else @click="setSaveFun">
						<image v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/user/settings-sumbit-bg.png`" class="bg" />
						<view class="relative">手机登录</view>
					</view>

					<!-- 第三方登陆 -->
					<view class="third-login-box" v-if="appLoginTypeList.length">
						<view class="third-login-view flex-all-center relative">
							<image style="top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 20rpx;" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/user/app-login-title-bg.png`" class="bg" mode="heightFix"/>
							<view class="third-login-txt"> 第三方登录 </view>
						</view>

						<view class="flex-justify-content-center">
							<view class="third-login-oper" v-for="(item, index) in appLoginTypeList" :key="item.typeName" @click="gooLoginFun(item.typeName)">
								<view class="oper-btn" v-if="item.typeName === 'weixin'">
									<image src="/static/apps/login/wechat.png" mode=""></image>
								</view>
								<view class="oper-btn" v-if="item.typeName === 'apple'">
									<image src="/static/apps/login/apple.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>

				<comTextPopup v-model="showAgreeTxtPopup" :isAllowedClickMaskClose="false" >
					<template #title> 《购买协议》&《隐私条款》 </template>
					<template>
						<view v-html="agreeBoxContent"></view>
					</template>
				</comTextPopup>
			</view>
		</template>
	</comRoot>
</template>

<script>
	import commonConfigs from '@/setupproject/BASE_CONFIG';

	import { setAsyncFunWait, getMobileIsFun, showAuthAPP } from '@/setupproject/TOOLS_FUN';

	import store from '@/store';
    import { 
		getContentHomeApi,
		user_save_info,
		getUserCodeApi,
	} from '@/setupproject/INTERFACE';

	export default {
		data() {
			return {
				msg: '获取验证码',
				time: 60,
				timer: null,
				form: {
					code: '',
					phone: '',
				},
				isAllowOper: false,
				rules: {
					code: '请输入验证码!',
					phone: '请输入手机号!',
				},
				appLoginTypeList: [],
				agreeBoxContent:'',
				showAgreeTxtPopup:false,
			};
		},
		computed: {
			commonNavHeight() {
				return this.$store.getters.commonNavHeight + 'px';
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			commonOnline() {
				return this.$store.getters.commonOnline;
			},
		},
		onLoad(options) {
			this.commonConfigs.setAppLoginType().then((res) => {
				this.appLoginTypeList = res;
			});
		},
		onUnload() {
			if(this.timer) {
				clearInterval(this.timer);  
				this.timer = null;  
			} 
		},
		mounted() {
			if (uni.getStorageSync('phoneNumber')) {
				this.form.phone = uni.getStorageSync('phoneNumber');
			}
		},
		methods: {
			async gooLoginFun(typeName) {
				if (typeName === 'weixin') {
					await store.dispatch('LOGIN_GET_FUN', { loginType: 'weixin' });
				}

				if (typeName === 'apple') {
					await store.dispatch('LOGIN_GET_FUN', { loginType: 'apple' });
				}
			},
			
			countDownTimes() {
				this.isAllowOper = true;
				let second = this.time;
				this.msg = `${second}s`;
				this.timer = setInterval(() => {
					if (second > 1) {
						second--;
						this.msg = `${second}s`;
					} else {
						this.clearDownTimes();
					}
				}, 1000);
			},
			
			clearDownTimes() {
				this.isAllowOper = false;
				this.msg = '获取验证码';
				if (this.timer) {
					clearInterval(this.timer);
				}
			},
			
			tipObortSumbit() {
				uni.showToast({
					title: '请输入您的手机号码和验证码!',
					icon: 'none'
				});
			},

			async getCodeFun() {
				if (!this.form.phone) {
					return uni.showToast({
						title: '请输入您的手机号码!',
						icon: 'none'
					});
				} else {
					if (!getMobileIsFun(this.form.phone)) {
						return uni.showToast({
							title: '请输入正确的手机号码!',
							icon: 'none'
						});
					}
				}

				this.countDownTimes();

				const { msg, code } = await getUserCodeApi({
					phone: this.form.phone,
					type: 1 // 1登录，2绑定手机
				});

				if (code !== 200) {
					this.clearDownTimes();
					return uni.showToast({
						icon: 'none',
						title: msg
					});
				}

				uni.showToast({
					title: msg,
					icon: 'none'
				});
			},

			async setSaveFun() {
				const { form, rules } = this;

				for (const key in rules) {
					const title = rules[key];
					if (!form[key]) {
						return uni.showToast({
							title,
							icon: 'none'
						});
					}
				}

				if (!this.form.phone) {
					return uni.showToast({
						title: '请输入您的手机号码!',
						icon: 'none'
					});
				} else {
					if (!getMobileIsFun(this.form.phone)) {
						return uni.showToast({
							title: '请输入正确的手机号码!',
							icon: 'none'
						});
					}
				}

				uni.setStorageSync('phoneNumber', this.form.phone);

				store.dispatch('LOGIN_GET_FUN', { loginType: 'smsCode', params: this.form });
			},
			
			agreementFun() {
				this.getContentAgreeFun()
				this.showAgreeTxtPopup=true
			},
			
			async getContentAgreeFun() {
				getContentHomeApi({
					type: 10
				}).then((res) => {
					this.agreeBoxContent = res.data.content;
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.login-box-content {
		width: 100vw;
		// min-height: 100vh;
		color: #FFF;
		padding: 64rpx 50rpx 0 50rpx;
		// background-color: #000;
	}
	
	.disabled {
		filter: grayscale(90%);
		-webkit-filter: grayscale(90%);
		-moz-filter: grayscale(90%);
		-ms-filter: grayscale(90%);
		-o-filter: grayscale(90%);
	}

	.form-content {
		// width: 702rpx;
		// height: 750rpx;
		margin: auto;
		// border: #999 solid 1px;
		border-radius: 5px;
	}

	.item-content {
		position: relative;
		border-bottom: 1px solid rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		padding: 25rpx 0;

		.title {
			font-size: 26rpx;
			color: #FFF;
		}

		input {
			flex: 1;
			color: #FFDA4D;
			font-size: 30rpx;
		}

		button {
			margin: 0;
			padding: 0;
			height: 40rpx;
			background-color: transparent;
			line-height: unset;
			font-size: 28rpx;
			margin-right: 20rpx;
			border-radius: 0;
			// border-left: 2rpx solid rgba(255, 255, 255, 0.3);
			padding-left: 48rpx;
			width: 200rpx;

			&:after {
				margin: 0;
				padding: 0;
			}
		}
	}

	.tip {
		// width: 702rpx;
		margin: auto;
		margin-top: 20rpx;

		font-size: 20rpx;
		color: #f00;

		& > view {
			margin-bottom: 10rpx;
		}
	}

	.save-btns {
		width: 100%;
		height: 123rpx;
		margin: auto;
		justify-content: center;
		display: flex;
		align-items: center;
		font-size: 40rpx;
		color: #FFFFFF;
		margin-top: 30rpx;
	}
	.copyrights {
		// position: fixed;
		// width: 702rpx;
		margin: auto;
		margin-top: 40rpx;
		margin-bottom: 18rpx;
		// padding: 0 30rpx 30rpx;
		// text-align: center;
		// bottom: 10%;
		color: #fff;
		font-size: 28rpx;

		font-size: 20rpx;
		color: #999999;
	}

	.right {
		width: 20rpx;
		height: 20rpx;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		transform: rotate(45deg);
	}

	// 按钮样式
	.btns-color {
		// padding: 0 !important;
		// border: unset;
		// border-radius: 6px;

		font-size: 30rpx;
		color: #FFDA4D;
	}

	// APP场景登陆
	.third-login-box {
		color: #fff;
		font-size: 22rpx;
		width: 100%;
		// display: flex;
		// justify-content: space-around;
		margin-top: 110rpx;

		.third-login-view {
			height: 40rpx;
			margin-bottom: 44rpx;

			image {
				width: 180rpx;
				height: 2rpx;
			}

			.third-login-txt {
				margin: 0 32rpx;
				// width: 172rpx;
				// height: 28rpx;
				font-size: 28rpx;
				color: #FFDA4D;
			}
			
			.login-line {
				height: 2rpx;
				background: #FFDA4D;
			}
		}

		.third-login-oper {
			.oper-btn {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin: 0 66rpx;

				image {
					background-color: #fff;
					border: 1px solid #fff;
					border-radius: 100%;
					width: 60rpx;
					height: 60rpx;
				}

				text {
					color: #fff;
					margin-top: 14rpx;
					font-size: 20rpx;
				}
			}
		}
	}
</style>
